<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大类列表</title>
    <!-- 引入 Element UI 的样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
  </head>
  <body>
    <div id="app">
      <!-- <div class="header">
        <div class="container header-content">
          <div class="logo">订单管理系统</div>
          <div style="position: absolute; left: 50%;">
            <el-button type="primary" size="large" @click="openMenu('../../index.html')">
              首页
            </el-button>
            <el-dropdown size="large" @command="openMenu">
              <el-button type="primary" size="large">
                业务中心<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in businessCenters" :command="item.path">{{item.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="user-info" v-if="currentUser.name">
            欢迎，{{ currentUser.name }}
            <el-button type="primary" size="mini" @click="exit(2)">登出</el-button>
          </div>
        </div>
      </div> -->
      <lx-header slot="header" v-on:toggle="isToggle = !isToggle"></lx-header>
      <div class=" main-content">
        <div class="content" style="width: 100%">

          <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
                </el-col>
            </el-row>

          <div class="center-grid mb-20">
            <el-table v-loading="loading" :data="tableData">
                <el-table-column v-for="(item, index) in tableColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
                    <template slot-scope="scope">
                      <template> {{ scope.row[item.fieldApi] }} </template>
                    </template>
                  </el-table-column>
                <el-table-column label="操作" align="center" :resizable="false" :show-overflow-tooltip="false" width="180" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text"  @click="detailView(scope.row)">详情</el-button>
                        <el-button size="mini" type="text"  @click="handleUpdate(scope.row)">修改</el-button>
                        <el-button size="mini" type="text"  @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-show="total>0"
                :total="total"
                :current-page.sync="queryParams.pageNum"
                :page-size.sync="queryParams.pageSize"
                @current-change="getList"
            />
          </div>
        </div>
      </div>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" :fullscreen="true" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="大类编码" prop="configCode">
                    <el-input v-model="form.configCode" placeholder="请输入大类编码" :disabled="this.submitFlag === 1"/>
                </el-form-item>
                <el-form-item label="大类名称" prop="configName">
                    <el-input v-model="form.configName" placeholder="请输入大类名称" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script> -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="../../assets/js/element-ui.js"></script>

    <script type="module">
      import LxHeader from '../../pages/components/LxHeader/index.js'
      Vue.component('lx-header', LxHeader)
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            businessCenters: [
                { name: '订单中心', path: '../index.html' },
                { name: '用户中心', path: '#' },
                { name: '产品中心', path: '#' },
                { name: '库存中心', path: '#' },
                { name: '财务中心', path: '#' },
                { name: '数据中心', path: '#' },
                { name: '系统中心', path: '#' },
                { name: '消息中心', path: '#' }
            ],
            queryParams: {
              pageNo: 1,
              pageSize: 10,
              puCode: '',
              puName: ''
            },
            total: 0,
            tableData: [],
            tableColumnData: [
                {
                    fieldName: '大类编号',
                    fieldApi: 'configCode'
                },
              {
                fieldName: '大类名称',
                fieldApi: 'configName'
              },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            configCodes: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            submitFlag: 0,
            request_host: request_host,
            pageSizes: pageSizes,
            multipleSelection: []
          }
        },
        created() {
            this.init()
        },
        methods: {
          exit,
          init() {
            this.getList()
          },
          getList() {
            this.loading = true
            try {
              axios.get(`${this.request_host}/system/bigConfig/list`,{ params: this.queryParams }).then((response) => {
                if (response.status == 200) {
                  this.tableData = response.data.rows
                  this.total = response.data.total
                  this.loading = false
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },
          /** 提交按钮 */
          submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.submitFlag === 0){
                        // 新增
                        axios.post(`${this.request_host}/system/bigConfig`, this.form)
                            .then(response => {
                                if (response.data.code == 200){
                                    this.$message.success("提交成功")
                                    this.cancel();
                                    this.getList()
                                }else {
                                    this.$message.error(response.data.msg)
                                }

                        })
                    } else {
                        //修改提交
                        axios.put(`${this.request_host}/system/bigConfig`, this.form)
                            .then(response => {
                                if (response.data.code == 200){
                                    this.$message.success("提交成功")
                                    this.cancel();
                                    this.getList();
                                }else {
                                    this.$message.error(response.data.msg)
                                }
                        })
                    }
                }
            })
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.form = {}
        },
          handleQuery() {
            this.getList()
          },
          resetQuery() {
            this.queryParams = {
              pageNo: 1,
              pageSize: 10,
              puCode: '',
              puName: ''
            }
          },
          /** 新增按钮操作 */
          handleAdd() {
            this.resetQuery()
            this.open = true
            this.submitFlag = 0
            this.title = "添加大类"
          },
          /** 修改按钮操作 */
          handleUpdate(row) {
            this.resetQuery()
            const configCode = row.configCode || this.configCodes[0]
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/bigConfig/` + configCode)
                .then(response => {
                    this.form = response.data.data
                    this.open = true
                    this.title = "修改大类"
                });
            this.submitFlag = 1

          },
          // 分页数量切换
          handleSizeChange(val) {
            this.$set(this.queryParams, 'pageSize', val)
            this.getData()
          },
          // 当前页码切换
          handleCurrentChange(val) {
            this.$set(this.queryParams, 'pageNo', val)
            this.getData()
          },
          detailView(row) {
            const configCode = row.configCode;
            const params = `configCode=${encodeURIComponent(configCode)}`;
            const url = `big_config_item.html?${params}`;
            window.open(url, '_blank');
          },
          /** 删除按钮操作 */
          handleDelete(row) {
                    const configName = row.configName
                    const configCode = row.configCode
                    this.$confirm('是否确认删除大类名称为"' + configName + '"的数据项？', "警告", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        // 这里替换为实际的API调用
                        return axios.delete(`${this.request_host}/system/bigConfig/` + configCode)
                    }).then(() => {
                        this.getList()
                        this.$message.success("删除成功")
                    })
                },
          openMenu(url) {
            window.open(url)
          },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
      .mb8 {
        margin-bottom: 10px;
    }
    </style>
  </body>
</html>
